<template>
    <div>
        <van-swipe :autoplay="3000" :width="375" :height="200">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image" />
            </van-swipe-item>
        </van-swipe>
        <van-cell class='vanc' title="热门话题" is-link value="查看更多"  url="http://localhost:8080/#/hti"/>
            <div class="swiper-container">
                <swiper :options="swiperOption" ref="mySwiper" >
                    <!-- slides -->

                    <swiper-slide id='slide2'><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2695178204,1467008728&fm=15&gp=0.jpg" alt=""></swiper-slide>
                    <swiper-slide id='slide2'><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=480633107,2244371365&fm=11&gp=0.jpg" alt=""></swiper-slide>
                    <swiper-slide id='slide2'><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2324284658,1647787114&fm=11&gp=0.jpg" alt=""></swiper-slide>
                    <swiper-slide id='slide2'><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=543995215,2080166965&fm=11&gp=0.jpg" alt=""></swiper-slide>
                    <swiper-slide id='slide2'><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1632348792,1041387833&fm=11&gp=0.jpg" alt=""></swiper-slide>
                </swiper>
            </div>
        <div class="shadow"></div>
        <van-cell class='vanc' title="精彩活动" is-link value="查看更多"  url="http://localhost:8080/#/hti"/>
        <div class="swiper-container">
                <swiper :options="swiperOption" ref="mySwiper" >
                    <!-- slides -->

                    <swiper-slide id='slide2'><img src="http://img4.imgtn.bdimg.com/it/u=2022290967,2532530771&fm=26&gp=0.jpg" alt=""></swiper-slide>
                    <swiper-slide id='slide2'><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1998267897,3463193587&fm=15&gp=0.jpg" alt=""></swiper-slide>
                    <swiper-slide id='slide2'><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2514796384,3569627912&fm=15&gp=0.jpg" alt=""></swiper-slide>
                    <swiper-slide id='slide2'><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3790262550,3061076114&fm=15&gp=0.jpg" alt=""></swiper-slide>
                    <swiper-slide id='slide2'><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=150650162,588232518&fm=15&gp=0.jpg" alt=""></swiper-slide>
                </swiper>
            </div>
        <div class="shadow"></div>
        <van-cell class='vanc' title="每日视频" is-link value="查看全部"  url="http://localhost:8080/#/hti"/>
        <div class="player">
            <video-player  class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions"
            >
            </video-player>
        </div>
        <div class="shadow"></div>
        <van-cell class='vanc' title="你可能感兴趣的人" is-link value="查看全部"  url="//youzan.github.io/vant/mobile.html"/>
        
          <div class="swiper-container">
                <swiper :options="swiperOption" ref="mySwiper" >
                    <!-- slides -->
                    <swiper-slide id='slide1'>
                        <img src='https://img.yzcdn.cn/2.jpg' alt="">
                        <span>名字</span>
                        <span class='sp'>训练达人</span>
                        <button>+关注</button>
                    </swiper-slide>
                    <swiper-slide id='slide1'>
                        <img src='https://img.yzcdn.cn/2.jpg' alt="">
                        <span>名字</span>
                        <span class='sp'>训练达人</span>
                        <button>+关注</button>
                    </swiper-slide>
                    <swiper-slide id='slide1'>
                        <img src='https://img.yzcdn.cn/2.jpg' alt="">
                        <span>名字</span>
                        <span class='sp'>训练达人</span>
                        <button>+关注</button>
                    </swiper-slide>
                    <swiper-slide id='slide1'>
                        <img src='https://img.yzcdn.cn/2.jpg' alt="">
                        <span>名字</span>
                        <span class='sp'>训练达人</span>
                        <button>+关注</button>
                    </swiper-slide>
                    <swiper-slide id='slide1'>
                        <img src='https://img.yzcdn.cn/2.jpg' alt="">
                        <span>名字</span>
                        <span class='sp'>训练达人</span>
                        <button>+关注</button>
                    </swiper-slide>
                    <swiper-slide id='slide1'>
                        <img src='https://img.yzcdn.cn/2.jpg' alt="">
                        <span>名字</span>
                        <span class='sp'>训练达人</span>
                        <button>+关注</button>
                    </swiper-slide>
                    <swiper-slide id='slide1'>
                        <img src='https://img.yzcdn.cn/2.jpg' alt="">
                        <span>名字</span>
                        <span class='sp'>训练达人</span>
                        <button>+关注</button>
                    </swiper-slide>
                </swiper>
            </div>
    
        <div class="shadow"></div>
        <van-cell class='vanc' title="精选文章" is-link value="查看全部"  url="http://localhost:8080/#/hti"/>
        <div class='jx'>
            <img src="http://img0.imgtn.bdimg.com/it/u=2828670384,1046658852&fm=26&gp=0.jpg" alt="">
        </div>
        <van-cell title="文章介绍. . . . . . . . . . . . . . . . . . . . . . . . " label="文章标注"/>
        <div class='shadow1'></div>

        <div class='clear'>
            <van-cell title="文章介绍. . . . . . . . . . . . . . . . . . . . . . " label="文章标注" class='van'/>
        <div class='img3'>
            <img src='https://img.yzcdn.cn/2.jpg' alt="" >
        </div>

        </div>
        <div class='shadow2'></div>
        <div class='clear' id='zhan'>
            <van-cell title="文章介绍. . . . . . . . . . . . . . . . . . . . . . " label="文章标注" class='van'/>
        <div class='img3'>
            <img src='https://img.yzcdn.cn/1.jpg' alt="" >
        </div>

        </div>
    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import '../../node_modules/swiper/dist/css/swiper.css'

import { videoPlayer } from 'vue-video-player';
export default {
    name:'Jx',
    data () {
        return {
             images: [
                'http://img5.imgtn.bdimg.com/it/u=3214480491,596242772&fm=26&gp=0.jpg',
                'http://img0.imgtn.bdimg.com/it/u=3858256159,3867943365&fm=26&gp=0.jpg',
                'http://img1.imgtn.bdimg.com/it/u=3893515241,2839244046&fm=26&gp=0.jpg',
                'http://img1.imgtn.bdimg.com/it/u=3211305138,2845209527&fm=26&gp=0.jpg',
            ],
            swiperOption: {
                notNextTick: true,
                direction : 'horizontal',
                freeMode : true,
                freeModeMomentum : false,
                slidesPerView :'auto'

            },
            playerOptions: {
//              playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                autoplay: false, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                type: "video/mp4",
                src: "https://mp4.vjshi.com/2016-06-08/add04c33328c1846084154ad31474869.mp4" //你的视频地址（必填）
                }],
                poster: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=528975294,2861049284&fm=26&gp=0.jpg", //你的封面地址
                width: document.documentElement.clientWidth,
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
//              controlBar: {
//              timeDivider: true,
//              durationDisplay: true,
//              remainingTimeDisplay: false,
                fullscreenToggle: true  //全屏按钮
//              }
            }
        }
    },
   methods: {
    

   },
   mounted () {
   },
   components: {
      videoPlayer
   },
   computed: {
       player() {
      return this.$refs.videoPlayer.player
    }

   }
}
</script>

<style scoped>
 #slide1{
      width:80px!important;
      height:151px;
      margin-right: 8px;
      text-align: center;
      margin-left:8px; 
      margin-right:8px; 
}
  #slide1 img{
      width:80px;
      height:74px;
      border-radius: 40px;
      text-align: center;
  }
   #slide1 span{
      display: block;
      width:28px;
      height:16px;
      font-size:14px;
      margin-bottom: 2px;
      margin-left: 23px
  }
   #slide1 .sp{
      display: block;
      width:48px;
      height:14px;
      font-size:12px;
      margin-bottom: 10px;
       margin-left: 18px
  }
  .shadow{
    width: auto;
    height: 10px;
    line-height: 20px;
    background-color: rgba(238, 238, 238, 1);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0);
    margin-top: 15px;
  }
  .img1{
    width: auto;
    height: 127px;
    background: pink
  }
  .img2{
    width: auto;
    height: 190px;
    background: peru
  }
  .jx{
    margin-left: 7px;
    width: auto;
    height: 189px;
    background: rebeccapurple;
    
  }
    .shadow1{
    margin-left: 7px;
    top: 1675px;
    width: auto;
    height: 1px;
    border: 1px solid rgba(187, 187, 187, 1);
  }
 .clear:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
  .img3{
    float:right;
    width: 70px;
    height: 70px;
    background: peru
  }
   .van{
    float:left;
    width: 252px;
  }
  .shadow2{
    margin-left: 7px;
    top: 1675px;
    width: auto;
    height: 1px;
    border: 1px solid rgba(187, 187, 187, 1);
    margin-top:15px;
  }
  #zhan{
    margin-bottom:50px;  
  }
</style>
